<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<title>PageDown-Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/jquery.pagedown-bootstrap.css" rel="stylesheet">

	<style>
		body {
			padding-top: 10px;
		}
	</style>

	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/jquery.pagedown-bootstrap.combined.min.js"></script>

</head>
<body>

	<div class="container">

		<div class="jumbotron">
			<h1>PageDown-Bootstrap</h1>
			<p>
				An extension of <a href="http://code.google.com/p/pagedown/">Pagedown</a> to neatly integrate into <a href="http://getbootstrap.com/">Twitter Bootstrap</a> for a WYSIWYG Markdown editor. This project is a fork of the work of <a href="https://github.com/samwillis/pagedown-bootstrap">Sam Willis</a>.
			</p>
			<p>
				This project is hosted on <a href="https://github.com/kevinoconnor7/pagedown-bootstrap/">GitHub</a> where <a href="https://github.com/kevinoconnor7/pagedown-bootstrap/issues">issues</a> can be reported. It is released under the <a href="https://raw.github.com/kevinoconnor7/pagedown-bootstrap/master/LICENSE.txt">MIT License</a>.
			</p>
			<p>
				<a class="btn btn-primary btn-large" href="https://github.com/kevinoconnor7/pagedown-bootstrap/">
				Fork on GitHub
				</a>
			</p>
		</div>

		<hr />
		<h2>Requirements</h2>
		<ul>
			<li><a href="http://jquery.com">jQuery 1.9+</a> (you know you should be keeping it more up-to-date).</li>
			<li><a href="http://getbootstrap.com/">Bootstrap 3.0+</a></li>
			<li><a href="http://fontawesome.io/">FontAwesome 4.0+</a></li>
		</ul>

		<hr />

		<h2>Basic usage</h2>
		<script src="https://gist.github.com/kevinoconnor7/5432336.js"></script>

		<hr />

		<h2>Options</h2>
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Name</th>
					<th>Type</th>
					<th>Default</th>
					<th>Options/Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>sanatize</td>
					<td>boolean</td>
					<td>true</td>
					<td>true or false, enables or disables sanatization of HTML</td>
				</tr>
				<tr>
					<td>help</td>
					<td>function</td>
					<td>null</td>
					<td>A function to be called when the help button it clicked. Null precludes the rendering of the help button.</td>
				</tr>
				<tr>
					<td>hooks</td>
					<td>array</td>
					<td>[]</td>
					<td>
						An array of objects that define hooks for the converter. Each object should define a string, 'event', and a function, 'callback'. A full list of events can be found <a href="http://code.google.com/p/pagedown/wiki/PageDown#Hooks_on_the_converter_object">here</a>.
					</td>
				</tr>
			</tbody>
		</table>

		<hr />

		<h2>Styling</h2>
		<p>
			All of the created elements are wrapped in nice helpful HTML tags as defined:
		</p>
		<dl>
			<dt>div.wmd-panel</dt>
			<dd>A wrapper around all of the elements of the textarea, button bar, and preview</dd>
			<dt>div.wmd-button-bar</dt>
			<dd>A wrapper that contains the editor's button bar.</dd>
			<dt>textarea.wmd-input</dt>
			<dd>The textarea that has been transformed into an editor</dd>
			<dt>div.wmd-preview</dt>
			<dd>A wrapper for the preview generated by the editor</dd>
		</dl>

		<hr />

		<h2>Demo</h2>

		<h3>1. This is the basic editor</h3>
<textarea id="pagedownMe" class="form-control" rows="10">
This is the *first* editor.
------------------------------

Just plain **Markdown**, except that the input is sanitized:

<marquee>I'm the ghost from the past!</marquee>
</textarea>
		<h4>Code:</h4>
		<script src="https://gist.github.com/kevinoconnor7/5432336.js"></script>

		<hr />

		<h3>2. This is a custom editor</h3>

<textarea id="pagedownMeDangerously" class="form-control" rows="10">
This is the *second* editor.
------------------------------

It has a plugin hook registered that surrounds all words starting with the
letter A with asterisks before doing the Markdown conversion. Another one gives bare links
a nicer link text. User input isn't sanitized here:

<marquee>I'm the ghost from the past!</marquee>

http://google.com

http://stackoverflow.com

It also includes a help button.
</textarea>
		<h4>Code:</h4>
		<script src="https://gist.github.com/kevinoconnor7/5432376.js"></script>
	</div>

	<script type="text/javascript">
		(function () {

			$("textarea#pagedownMe").pagedownBootstrap();

			$("textarea#pagedownMeDangerously").pagedownBootstrap({
				'sanatize': false,
				'help': function () { alert("Do you need help?"); },
				'hooks': [
					{
						'event': 'preConversion',
						'callback': function (text) {
							return text.replace(/\b(a\w*)/gi, "*$1*");
						}
					},
					{
						'event': 'plainLinkText',
						'callback': function (url) {
							return "This is a link to " + url.replace(/^https?:\/\//, "");
						}
					}
				]
			});

			$('.wmd-preview').addClass('well');

		})();
	</script>
</body>
</html>
